<template>
  <div>
    <el-form :inline="true" :model="query" class="query-form" size="mini">
<!--      <el-form-item class="query-form-item">-->
<!--        <el-input :placeholder="hotwords" disabled style="width: 330px" />-->
<!--      </el-form-item>-->
      <el-form-item>
        <el-button-group>
          <el-button type="primary" icon="el-icon-refresh" @click="getList">刷新</el-button>
        </el-button-group>
      </el-form-item>
    </el-form>
    <el-link
      v-for="(item,index) in hot_search"
      :key="index"
      type="primary"
      class="hot-search-link"
      @click="item.title_sub === '微博热搜榜'?moreHot():hotDesc(item.title_sub)"
    >
      {{ item.title_sub === '微博热搜榜' ? '更多热搜' : item.title_sub }}
      <el-image v-if="item.icon && item.title_sub !== '微博热搜榜'" :src="item.icon" class="hot-search-img" />
    </el-link>

    <el-row :gutter="50" style="margin-top: 20px">
      <el-col :span="12">
        <el-card v-if="this.morehot">{{ '实时热点，每分钟更新一次' }}</el-card>
        <el-table v-if="this.morehot" v-loading="hotLoading" :data="hotSearchData" style="width: 100%" height="600">
          <el-table-column label="榜单" width="100">
            <template slot-scope="scope">
              <el-image v-if="scope.row.pic" :src="scope.row.pic" class="pic" />
            </template>
          </el-table-column>
          <el-table-column label="热搜词" width="300">
            <template slot-scope="scope">
              <el-link :type="scope.$index>3?'warning':'danger'" @click="hotDesc(scope.row.desc)">
                {{ scope.row.desc }}
              </el-link>
              <el-image
                v-if="scope.row.icon"
                :src="scope.row.icon"
                class="icon"
              />
            </template>
          </el-table-column>
          <el-table-column label="热搜指数" width="120">
            <template slot-scope="scope">
              {{ scope.row.desc_extr || '' }}
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="12">
        <el-card v-if="this.morehot">{{ '实时上升热点' }}</el-card>
        <el-table v-if="this.morehot" v-loading="hotLoading" :data="upData" style="width: 100%" height="600">
          <el-table-column label="热度" width="100">
            <template slot-scope="scope">
              <el-image v-if="scope.row.pic" :src="scope.row.pic" class="pic" />
            </template>
          </el-table-column>
          <el-table-column label="上升词" width="300">
            <template slot-scope="scope">
              <el-link type="warning" @click="hotDesc(scope.row.desc)">
                {{ scope.row.desc }}
              </el-link>
              <el-image
                v-if="scope.row.icon"
                :src="scope.row.icon"
                class="icon"
              />
            </template>
          </el-table-column>
          <el-table-column label="上升指数" width="120">
            <template slot-scope="scope">
              {{ scope.row.desc_extr || '' }}
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>

    <el-card v-if="this.cardlist_title" class="box-card">
      <div class="clearfix">
        <img v-if="portrait" :src="portrait" class="icon" referrerpolicy="no-referrer">
        <br>
        <span>{{ '#' + cardlist_title + '#' }}</span>
      </div>
      <div v-if="this.lead" class="text item">
        {{ lead }}
      </div>
    </el-card>
    <el-table v-loading="loading" :data="complexMblog" :max-height="tableHeight">
      <el-table-column label="内容" width="700">
        <template slot-scope="scope">
          <el-popover placement="right" width="600" trigger="hover">
            <el-table v-loading="flowLoading" :data="hotFlowData" max-height="350">
              <el-table-column width="400" property="text" label="评论内容">
                <template slot-scope="scope">
                  <b v-html="scope.row.text" />
                  <p v-for="comment in scope.row.comments" v-html="'&nbsp;&nbsp;&nbsp;'+comment.text" />
                </template>
              </el-table-column>>
              <el-table-column width="80" property="like_count" label="点赞数" />
              <el-table-column width="150" property="user.screen_name" label="评论者昵称" />
            </el-table>
            <el-pagination
              v-if="max_id!==0"
              next-text="下一页"
              layout="prev, pager, next"
              @current-change="flowHandleCurrentChange"
            />
            <b slot="reference" @mouseenter="clickHotFlow(scope.row.id)" v-html="scope.row.text" />
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="图片/视频" width="350">
        <template slot-scope="scope">
          <viewer v-if="scope.row.pics">
            <el-carousel :interval="4000" type="card" height="200px">
              <el-carousel-item v-for="(pic,index) in scope.row.pics" :key="index">
                <img v-if="pic.large.url" :src="pic.large.url" referrerpolicy="no-referrer">
              </el-carousel-item>
            </el-carousel>
          </viewer>
          <video
            v-if="scope.row.page_info && scope.row.page_info.media_info"
            :src="scope.row.page_info.media_info.stream_url_hd"
            controls="controls"
            style="width: 100%;"
          />
        </template>
      </el-table-column>
      <el-table-column label="发布账号" width="150">
        <template slot-scope="scope">
          {{ scope.row.user.screen_name }}
        </template>
      </el-table-column>
      <el-table-column label="发布时间" width="120">
        <template slot-scope="scope">
          {{ scope.row.created_at|timeFilter }}
        </template>
      </el-table-column>
      <el-table-column label="发布客户端" width="120" prop="source" />
    </el-table>
    <div v-if="complexMblog.length>0" class="block">
      <el-pagination
        :current-page.sync="currentPage"
        background
        layout="prev, pager, next"
        :total="total"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import {
  hot, // 热搜词列表
  hotSearch, // 更多热搜
  hotDesc, hotFlow // 热搜词详细
} from '@/api/weibo'
import { parseTime } from '@/utils'

export default {
  name: 'WeiboHot',
  components: {},
  filters: {
    timeFilter(time) {
      return parseTime(time)
    }
  },
  data() {
    return {
      flowLoading: true,
      hotFlowData: [],
      id: '',
      max_id: '', // 下一页的最大id
      // hotwords: '', // 热门搜索提示
      hot_search: [], // 热门搜索关键词列表
      query: {
        page: 1,
        limit: 10
      },
      currentPage: 1, // 当前页
      total: 0,
      loading: false,
      hotLoading: true,
      list: [],
      morehot: false, // 是否显示更多热搜
      hotSearchData: [
        {
          desc: '', // 热搜词
          icon: '', // 热搜词后跟的图标
          desc_extr: '' // 热搜指数
        }
      ], // 热搜榜
      upData: [
        {
          desc: '', // 上升词
          icon: '', // 上升词跟的图标
          desc_extr: '' // 上升指数
        }
      ], // 实时上升热点
      cardlist_title: '', // 热词名称
      complexHot: [], // 综合热门
      lead: '', // 热词导语
      portrait: '', // 肖像or热词图标
      complexMblog: [], // 综合微博
      tableHeight: document.documentElement.clientHeight - 400
    }
  },
  mounted() {
    document.body.ondrop = function(event) {
      event.preventDefault()
      event.stopPropagation()
    }
  },
  created() {
    this.getList()
  },
  methods: {
    // 参数初始化
    init() {
      this.morehot = false
      this.hotSearchData = []
      this.cardlist_title = ''
      this.complexHot = []
      this.lead = ''
      this.portrait = ''
      this.complexMblog = []
    },

    // 分页
    handleCurrentChange(val) {
      this.query.page = val
      this.currentPage = val
      this.hotDesc(this.cardlist_title, this.query.page)
    },
    // 热搜词
    getList(name) {
      this.init() // 参数初始化
      hot().then(response => {
        const data = response.result.data || {}
        if (response.code === 0) {
          // this.hotwords = data.hotwords[0]['tip'] + data.hotwords[0]['word'] // 搜索框提示词
          this.hot_search = data.cards[0]['group'] // 热门搜索词
        }
      }).catch(() => {
        this.loading = true
      })
    },

    // 更多热搜
    moreHot() {
      this.init()
      this.morehot = true // 显示更多热搜榜
      this.hotSearch()
    },
    // 热搜榜
    hotSearch() {
      hotSearch().then(response => {
        // console.log(response)
        this.hotLoading = true
        const data = response.result.data || {}
        if (response.code === 0) {
          this.hotLoading = false
          this.hotSearchData = data.cards[0]['card_group'] // 热搜榜
          this.upData = data.cards[1]['card_group'] // 上升榜
        }
      }).catch(() => {
        this.loading = false
      })
    },
    // 热搜词详细
    hotDesc(desc, page) {
      this.init()
      const params = {
        desc: desc, // 热词
        page: page // 分页
      }
      this.loading = true
      hotDesc(params).then(response => {
        // console.log(response)
        const data = response.result.data || {}
        if (response.code === 0) {
          this.cardlist_title = desc
          this.lead = data.cards[0]['desc'] // 导语
          this.portrait = data.cardlistInfo.portrait // 热词图标
          this.total = data.cardlistInfo.total // 总页码数
          const mblogArray = []
          if (page > 1) {
            const complexHot = this.complexHot = data.cards // 分页的综合热门
            complexHot.map(item => {
              mblogArray.push(item.mblog)
            })
          } else {
            this.currentPage = 1 // 重新刷新分页值
            const complexHot = this.complexHot = data.cards.filter((elem, index) => index !== 0) // 综合热门
            complexHot.map(item => {
              mblogArray.push(item.mblog)
              // item.card_group.map(mblog => {
              //     mblogArray.push(mblog.mblog)
              // })
            })
          }
          this.complexMblog = mblogArray.filter(function(e) {
            return e
          }) // 过滤空数据
          this.loading = false
        } else {
          this.$message.error('微博抽风了')
        }
      }).catch(() => {
        this.loading = false
      })
    },
    clickHotFlow(id) {
      this.hotFlow(id)
    },
    hotFlow(id, max_id) {
      this.id = id
      hotFlow({ id, max_id }).then(res => {
        if (res.code === 0) {
          this.flowLoading = false
          this.hotFlowData = res.result.data && res.result.data.data
          this.max_id = res.result.data && res.result.data.max_id || 0
        }
      })
    },
    // 分页
    flowHandleCurrentChange() {
      const id = this.id
      const max_id = this.max_id
      this.flowLoading = true
      this.hotFlow(id, max_id)
    }
  }
}
</script>

<style type="text/scss" lang="scss" scoped>
.hot-search-link {
  margin-left: 10px;
}

.hot-search-img {
  height: 10%;
  width: 10%;
  vertical-align: top;
}

.pic {
  width: 50%;
  height: 50%
}

.icon {
  width: 6%;
  height: 6%;
  vertical-align: top;
}
</style>
